<template>
  <div class="box">
    <div class="form">
      <div class="title">借用信息</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="借用班组:" prop="teamGroupName">
          <el-select
            placeholder="请选择借用班组"
            style="width: 100%"
            v-model="ruleForm.teamGroupName"
          >
            <el-option
              v-for="(item, index) in team"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="借用人姓名:" prop="username">
          <el-autocomplete
            style="width: 100%"
            placeholder="请输入借用人姓名"
            v-model="ruleForm.username"
            :fetch-suggestions="querySearch"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="工程类型:" prop="projectType">
          <el-select
            placeholder="请选择工程类型"
            style="width: 100%"
            v-model="ruleForm.projectType"
          >
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程编号:" prop="">
          <el-input
            placeholder="请输入工程编号"
            v-model="ruleForm.projectCode"
          ></el-input>
        </el-form-item>
        <el-form-item label="工程名称:" prop="">
          <el-input
            type="textarea"
            placeholder="请输入工程名称"
            v-model="ruleForm.projectName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
          <el-button class="btn" @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getTeams, getTypes, setUserInfo } from "@/common/api";
export default {
  name: "BorrowInfo",
  props: {},
  components: {},
  data() {
    return {
      ruleForm: {
        teamGroupName: "",
        username: "",
        projectType: "",
        projectCode: "",
        projectName: "",
      },
      rules: {
        teamGroupName: [
          { required: true, message: "请选择借用班组", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入借用人姓名", trigger: "blur" },
        ],
        // projectType: [
        //   { required: true, message: "请选择工程类型", trigger: "blur" },
        // ],
      },
      team: [], //借用班组
      types: [], //工程类型
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getTeams();
    this.getTypes();
  },
  methods: {
    getTeams() {
      getTeams({ pageNum: 1, pageSize: 300 }).then((res) => {
        if (res.success) {
          this.team = res.data.records.map((i) => {
            return {
              label: i.teamGroupName,
              value: i.id,
            };
          });
        }
      });
    },
    getTypes() {
      getTypes().then((res) => {
        if (res.success) {
          this.types = res.data;
        }
      });
    },
    resetForm() {
      this.ruleForm = {
        teamGroupName: "",
        username: "",
        projectType: "",
        projectCode: "",
        projectName: "",
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          setUserInfo(this.ruleForm).then((res) => {
            if (res.success) {
              let arr = JSON.parse(localStorage.getItem("userArr") || "[]");
              let single = arr.find((i) => i == this.ruleForm.username);
              if (!single)
                localStorage.setItem(
                  "userArr",
                  JSON.stringify([...arr, this.ruleForm.username].slice(-10))
                );
              this.$emit("goStep", 1);
            }
          });
        } else {
        }
      });
    },
    querySearch(queryString, cb) {
      let data = JSON.parse(localStorage.getItem("userArr") || "[]");
      let results = queryString
        ? data.filter((i) => i.includes(queryString))
        : data;
      let arr = results.map((i) => ({ value: i }));
      cb(arr);
    },
  },
};
</script>


<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .form {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
      /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
        rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
    border-radius: 14px;
    padding: 10px 30px 20px 0px;
    width: 30%;
    min-width: 400px;

    .title {
      margin-left: 10px;
      margin-bottom: 10px;
      color: #009191;
      font-weight: bold;
      font-size: 22px;
    }
  }
}
</style>
